<template>
    <base-card>

        <el-form :model="formItem" style="  --el-text-color-placeholder: #999999;" label-width="auto">
            <div class="topPackage">
                <div class="topRectangle"></div>
                <span> 修改机构信息 </span>
            </div>
            <el-divider />
            <p>机构信息</p>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="机构编号">
                        123
                    </el-form-item>
                </el-col>
                <el-col :span="8">

                    <el-form-item label="机构名称" style="size: 13px;">
                        <el-input v-model="formItem.name" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="机构图片" style="size: 13px; height: 40px; width: 100px;">
                        <el-upload class="avatar-uploader" :action="`${baseURL}/images/upload`" :show-file-list="false"
                            :on-success="handleAvatarSuccess">
                            <img v-if="formItem.image" :src="formItem.image" class="avatar"
                                style="width: 100px; height: 100px;" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>


            </el-row>
            <el-row :gutter="24" style="margin-top: 20px;">
                <el-col :span="8">

                    <el-form-item label="联系人姓名">
                        <el-input v-model="formItem.contacts" placeholder="请输入" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="联系电话">
                        <el-input v-model="formItem.phone" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24" style="margin-top: 20px;">
                <el-col :span="16">
                    <el-form-item label="机构地址">
                        <el-input v-model="formItem.address" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24" style="margin-top: 20px;">
                <el-col :span="16">
                    <el-form-item label="机构介绍">
                        <el-input v-model="formItem.intro" placeholder="请输入" type="textarea" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-divider />

            <el-form-item>

                <el-button type="primary" @click="updateOrganizations(route.params._id)">
                    保存
                </el-button>
                <el-button @click="goBack"> 返回</el-button>

            </el-form-item>
        </el-form>
    </base-card>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import { detailOrganizationsApi, updateOrganizationsApi } from '../../../api/organizations';
import { onMounted, ref } from 'vue';
import { Plus } from '@element-plus/icons-vue'
onMounted(() => {
    detailOrganizations()
})

const route = useRoute();

const router = useRouter();
const goBack = () => {
    console.log('go back')
    router.back()
};
const baseURL = import.meta.env.VITE_BASE_URL;
const handleAvatarSuccess = (
    res
) => {
    console.log(formItem.value.image);

    if (res.code == 200) {
        formItem.value.image = res.data;
    }
}
const formItem = ref({});
function detailOrganizations() {
    detailOrganizationsApi({ _id: route.params._id })
        .then(res => {
            console.log(res);
            if (res.code == 200) {
                formItem.value = res.data;
            }
        })
}
async function updateOrganizations(_id) {
    const res = await updateOrganizationsApi({ _id, ...formItem.value })
    if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: '修改成功'

        })
        goBack()
    } else {
        ElMessage.error(res.message)
    }
    detailOrganizations()
}
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 30px;
    height: 30px;

    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}
</style>